<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security" layout:decorator="/base_layout" lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>SpringWeb with Thymeleaf DEMO</title>
    <link rel="stylesheet" href="/css/common-tools-v0.0.1.css"/>
    <link rel="stylesheet" href="/css/md-default.css"/>
    <link rel="stylesheet" href="/css/hello-v1.0.0.css"/>
    <script src="/script/md-default.js"></script>
    <script src="/script/common-tools-v1.0.0.js"></script>
    <script src="/script/hello-v1.0.0.js"></script>
    <script th:inline="javascript">
        $(function () {
            /*<![CDATA[*/
            for (var i = 0; i < 3; i++) {
                console.debug("i= " + i);
            }
            /*]]>*/
        })

        function updateUser(thisNode, userId) {
            var csrf = $("#_csrf").val();
            var username = $(thisNode).parents("tr").find("input:eq(0)").val();
            var password = $(thisNode).parents("tr").find("input:eq(1)").val();
            console.debug("userId = " + userId);
            console.debug("username = " + username);
            console.debug("password = " + password);
            $.confirm({
                title: "Tip",
                content: "You are modifying information of " + username + " ?",
                btnSure: {
                    content: "YES",
                    callback: function () {
                        console.debug("update user info");
                        $.ajax({
                            url: "/user/update/" + userId,
                            type: "PUT",
                            data: {
                                "id": userId,
                                "username": username,
                                "password": password,
                                "_csrf": csrf
                            }
                        }).done(function (data) {
                            $.alert({
                                content: data.message,
                                timeout: 1
                            })
                        })
                    }
                },
            });
        }

        function deleteUser(thisNode, userId) {
            var csrf = $("#_csrf").val();
            var username = $(thisNode).parents("tr").find("input:eq(0)").val();
            $.confirm({
                title: "WARN !",
                content: "You are deleting information of " + username + " ?",
                btnSure: {
                    content: "YES",
                    callback: function () {
                        console.debug("delete user info");
                        $.ajax({
                            url: "/user/delete/" + userId,
                            type: "PUT",
                            data: {
                                "_csrf": csrf
                            },
                        }).done(function (data) {
                            $.alert({
                                content: data.message,
                                timeout: 1,
                                callback: function () {
                                    if (data.result == true) {
                                        $(thisNode).parents("tr").fadeOut('normal', function () {
                                            $(this).remove();
                                        });
                                    }
                                }
                            })
                        });
                    }
                }
            });
        }
    </script>
</head>
<body layout:fragment="main_content">
<section>
    <h1>Hello, Spring Boot</h1>
    <address th:inline="text">by [[${user.username}]]</address>
</section>
<hr class="md-divider"/>
<section>
    <h1>Using Thymeleaf</h1>
    <button id='addBtn' class='md md-btn md-raised-btn'>NEW</button>
    <form class="user-form">
        <input type="hidden"
               th:name="${_csrf.parameterName}"
               id="_csrf"
               th:value="${_csrf.token}"/>
        <div class="md-form">
            <div>
                <input type="text" id="username" name="username"/>
                <label for="username">Username</label>
            </div>
            <div>
                <input type="text" id="password" name="password"/>
                <label for="password">Password</label>
            </div>
            <div class="btn-container">
                <input type="reset" class="md md-btn md-raised-btn" value="reset"/>
                <input type="submit" class="md md-btn md-raised-btn" id="newUser" value="submit"/>
            </div>
        </div>
    </form>
    <table sec:authorize="hasAnyRole('USER','ADMIN')" class="user-table">
        <thead>
        <tr>
            <th>No.</th>
            <th>Username</th>
            <th>Password</th>
            <th>Since</th>
            <th>Operate</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="u,uStat:${users}" th:if="not ${#lists.isEmpty(users)}">
            <td>
                <input type="text" th:value="${uStat.count}" th:attr="uid=${u.id}"/>
            </td>
            <td>
                <input type="text" th:value="${u.username}" class="username"/>
            </td>
            <td>
                <input type="text" th:value="${u.password}" class="password"/>
            </td>
            <td th:text="${#dates.format(u.createTime,'yyyy/MM/dd')}"></td>
            <td>
                <button class="md-btn md-flat-btn btnUpdate">Update</button>
                <button class="md-btn md-flat-btn btnDelete">Delete</button>
            </td>
        </tr>
        </tbody>
    </table>
    <h1>Cascade data</h1>
    <p th:inline="text">Username: [[${address.user.username}]]</p>
    <h1>Session data</h1>
    <p th:text="${'Username: '+session.usr.username}"></p>
    <h1>Iteration cascade properties</h1>
    <th:block th:each="addr:${session.usr.addresses}">
        <p th:text="${'Location: '+addr.location}"></p>
    </th:block>
</section>
<hr class="md-divider"/>
<div sec:authorize="hasAnyRole('USER','ADMIN')" class="ajax-table-container"></div>
</body>
</html>